<template>
  <div class="review1" v-if="this.reviewArr.length">
    <p class="title">{{ menuTitle }}的答疑</p>
    <div class="main" v-for="(item, index) in reviewArr" :key="index">
      <img :src="item.touxiang" alt="" class="touxiang" />
      <div>
        <p>
          <span class="username">{{ item.username }}</span>
          <span>{{ item.pushtime }}</span>
        </p>
        <p class="neirong">{{ item.neirong }}</p>
      </div>
      <p
        class="dainzan"
        @click="fdianzan($event)"
        ref="dianzan"
        :data-index="index"
      >
        <span class="iconfont icondianzan11" :data-index="index"></span>
        <span :data-index="index">{{ item.good }} 赞</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      reviewArr: [],
      dianzanArr: [], //每个评论是否点赞
    };
  },
  props: ["cookid", "menuTitle"],
  methods: {
    fdianzan(e) {
      let islogin = window.localStorage.getItem("islogin");
      let index1 = e.target.dataset.index;
      if (islogin) {
        if (this.dianzanArr[index1]) {
          // 点赞
          this.$refs.dianzan[index1].style.color = "red";
          // 修改数据库评论点赞数
          this.$axios("/wxw/waltercommentgood", {
            params: {
              commentid: this.reviewArr[index1].commentid,
              dianzan: this.dianzanArr[index1],
            },
          });
          // 刷新页面
          this.$refs.dianzan[index1].children[1].innerHTML =
            parseInt(this.$refs.dianzan[index1].children[1].innerHTML) +
            1 +
            " 赞";
          this.dianzanArr[index1] = 0;
        } else {
          let index1 = e.target.dataset.index;
          // 取消
          this.$refs.dianzan[index1].style.color = "";
          this.$axios("/wxw/waltercommentgood", {
            params: {
              commentid: this.reviewArr[index1].commentid,
              dianzan: this.dianzanArr[index1],
            },
          });
          this.$refs.dianzan[index1].children[1].innerHTML =
            parseInt(this.$refs.dianzan[index1].children[1].innerHTML) -
            1 +
            " 赞";
          this.dianzanArr[index1] = 1;
        }
      } else {
        this.$router.push("/login");
      }
    },
  },
  watch: {
    cookid() {
      this.$axios("/wxw/wreviewinfo", { params: { cookid: this.cookid } }).then(
        (res) => {
          this.reviewArr = res.data;
          this.dianzanArr.length = this.reviewArr.length;
          this.dianzanArr.fill(1);//默认每条评论都还未点赞
        }
      );
    },
  },
  mounted() {
    this.$axios("/wxw/wreviewinfo", { params: { cookid: this.cookid } }).then(
      (res) => {
        this.reviewArr = res.data;
        this.dianzanArr.length = this.reviewArr.length;
        this.dianzanArr.fill(1);//默认每条评论都还未点赞
      }
    );
  },
};
</script>

<style lang="scss" scoped>
.review1 {
  margin: 50px auto 20px;
  box-sizing: border-box;
  padding-right: 100px;
  width: 1000px;
}
.title {
  font-size: 24px;
  color: #c0ae7d;
}
.main {
  font-size: 14px;
  color: #6d8978;
  position: relative;
  margin: 30px 5px;
  display: flex;
  .username {
    color: red;
    margin: 0 8px;
  }
  .touxiang {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }
  .neirong {
    color: #111;
    margin: 8px;
  }
  .dainzan {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 0;
    .iconfont {
      margin-right: 10px;
    }
  }
}
</style>